<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>cart</title>

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">

</head>
<style>
    a {
        text-decoration: none;
    }

    .block-1 {
        width: 1200px;
        margin: 10px auto;
        border: 1px solid silver;
    }

    .title > div {
        flex: 1; /*划分区域*/
        border-bottom: 1px solid silver;
        border-right: 1px solid silver;
        height: 70px;
        line-height: 30px;
        text-align: center;
        font-size: 13px;
    }

    .title > div:nth-child(i) input {
        position: relative;
        top: 2px;
    }

    .title1 {
        display: flex; /*弹性布局*/
        flex-direction: row; /*以行的方式修饰*/
        /*margin-top: 10px;*/
    }

    .title1 > div {
        flex: 1; /*划分区域*/
        border-bottom: 1px solid silver;
        border-right: 1px solid silver;
        border-top: 1px solid silver;
        height: 70px;
        line-height: 30px;
        text-align: center;
        font-size: 13px;
    }

    .title1 > div:nth-child(i) input {
        position: relative;
        margin-top: 10px;
    }

    .title1 > div:hover {
        background-color: rgba(141, 141, 141, 0.54);
    }

    /* 页面初始化 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 表格居中、边框合并、文字居中、表格内字体默认大小、边*/

    /*!*表格行的背景  *!*/
    /*tr {*/
    /*    background-color: #eee;*/
    /*}*/

    /*!* 表格标题字体大小 *!*/
    /*table caption {*/
    /*    font-size: 1.5em;*/
    /*}*/

    /*!*表头单元格背景  *!*/
    /*th {*/
    /*    background-color: #ccc;*/
    /*    width: 100px;*/
    /*}*/

    /*!* 单元格的最小宽度，内填充和高度 *!*/
    /*th,td {*/
    /*    min-width: 80px;*/
    /*    padding: 0 15px;*/
    /*    height: 50px;*/
    /*}*/

    /*!* 表格主体行的下边框 *!*/
    /*tbody tr {*/
    /*    border-bottom: 1px solid #ccc;*/
    /*}*/

    /*!*总计金额颜色 *!*/
    /*.result {*/
    /*    color: red;*/
    /*}*/

    /*!* 去除结算单元格内填充 *!*/
    /*.submit {*/
    /*    padding: 0;*/
    /*}*/

    /*!* 结算单元格中链接的样式 *!*/
    /*td.submit a {*/
    /*    display: block;*/
    /*    width: 50%;*/
    /*    height: 100%;*/
    /*    line-height: 50px;*/
    /*    background-color: #ff0000;*/
    /*    color: white;*/
    /*    cursor: pointer;*/
    /*}*/

    /*!* 鼠标悬停行时背景变化 *!*/
    /*table > tbody > tr:hover {*/
    /*    background-color: white;*/
    /*}*/
</style>
<body>
<!--    导航栏-->
<div th:replace="~{header :: header}"></div>

<div class="block-1">
    <div class="title1">
        <div>选择</div>
        <div>商品名称</div>
        <div>商品图片</div>
        <div>单价</div>
        <div>数量</div>
        <div>金额</div>
        <div>操作</div>
    </div>
    <form th:action="@{/cart/addOrdersFromCarts}" method="post">
        <div class="title1" th:each="cart:${carts}">
            <div><input name="cartIds" th:value="${cart.getCartId()}"  type="checkbox"></div>
            <div th:text="${cart.getGoods().getGoodsName()}"></div>
            <div>
                <div><img style="height: 60px;width: 60px" th:attr="src=${cart.getGoods().getGoodsImage()}"></div>
            </div>
            <div>
                ￥<span th:text="${cart.getGoodsNumber()*cart.getGoods().getGoodsPrice()}"></span>
            </div>
            <div th:text="${cart.getGoodsNumber()}"></div>
            <div th:text="${cart.getGoods().getGoodsPrice()*cart.getGoodsNumber()}"> ￥1596</div>
            <div>
                <span><a th:href="@{/cart/chooseAddress(cartId=${cart.getCartId()})}">去结算</a></span>
                <!--            <span>编辑</span>-->
                <span><a th:href="@{/cart/delCart(cartId=${cart.getCartId()})}">删除</a></span>
            </div>
        </div>
        <input type="submit" value="结算">
    </form>
</div>


</body>
</html>